<template>
  <view>
    <view class="lims_menu">
      <view>
        <label>工作待办</label>
        <view style="display: flex; flex-direction: column" v-show="lens">
          <view v-for="(items, key) in dataLists1" :key="key">
            <label style="margin-left: 24rpx">
              {{ key }}
            </label>
            <view class="lims_menu_list">
              <view
                v-for="item in items"
                :key="item.id"
                @click="jump(item.activityName)"
              >
                <label class="commonColor">{{ item.activityName }}</label>
                <label class="commonFont">{{ item.workitemCount }}</label>
              </view>
            </view>
          </view>
        </view>
        <up-empty mode="data" v-show="!lens"> </up-empty>
      </view>
    </view>
    <view class="lims_menu" style="margin-top: -56rpx">
      <view>
        <view class="box">
          <label>订单数据</label>
          <view class="flexCenter">
            <picker
              @change="bindPickerChange"
              :value="pickerindex"
              :range="array"
            >
              <view class="uni-input">{{ array[pickerindex] }}</view>
            </picker>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>

        <view class="lims_menu_list">
          <view v-for="(item, index) in dingdanlists" :key="index">
            <label class="commonColor">{{ item.title }}</label>
            <label class="commonFont">{{ item.age }}</label>
          </view>
        </view>
      </view>
    </view>
    <view class="lims_menu" style="margin-top: -56rpx">
      <view style="margin: 0">
        <label>销售数据 </label>
        <view class="charts-box">
          <qiun-data-charts
            type="column"
            :opts="opts2"
            :chartData="chartData2"
            :ontouch="true"
          />
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { anMaterialTable1 } from "./api.js";
import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts";
const array = ref(["本周", "上周", "本月", "上月", "本年"]);
const pickerindex = ref("0");
const bindPickerChange = (e) => {
  pickerindex.value = e.detail.value;
  console.log("picker发送选择改变，携带值为", e.detail.value);
};
const opts2 = ref({
  color: ["#1890FF", "#52C41A"],
  padding: [15, 15, 30, 15],
  legend: {
    show: true,
    position: "bottom",
    float: "center",
    fontSize: 12,
  },
  xAxis: {
    disableGrid: true,
    fontColor: "#666666",
    fontSize: 10,
  },
  yAxis: {
    splitNumber: 6,
    gridType: "dash",
    dashLength: 4,
    gridColor: "#EEEEEE",
    fontColor: "#666666",
    fontSize: 10,
    min: 0,
    max: 30,
  },
  extra: {
    column: {
      width: 25,
      spacing: 10,
    },
  },
});
const chartData2 = ref({
  categories: [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ],
  series: [
    {
      name: "订单数",
      data: [8, 7, 10, 16, 20, 23, 25, 28, 26, 24, 21, 15],
    },
    {
      name: "金额(万元)",
      data: [6, 7, 9, 13, 15, 18, 19, 18, 17, 15, 12, 8],
    },
  ],
});
const dataLists1 = ref([]);
const lens = ref(0);
const dingdanlists = ref([
  {
    title: "新增客户",
    age: 28,
  },
  {
    title: "新增订单",
    age: 28,
  },
  {
    title: "原料入库",
    age: 28,
  },
  {
    title: "成品入库",
    age: 28,
  },
  {
    title: "发货出库",
    age: 28,
  },
  {
    title: "领料量",
    age: 28,
  },
]);
const jump = (name) => {
  let pageName = "";
  if (["技术评审", "生产评审"].includes(name)) {
    pageName = "TechnicalAndProductionReview";
  } else if (["领料下单", "生产领料", "领料确认", "出库确认"].includes(name)) {
    pageName = "MaterialRequisition";
  } else if (["退库登记", "退库确认"].includes(name)) {
    pageName = "ReturnList";
  }
  uni.navigateTo({
    url: `/pages/${pageName}/${pageName}?applyType=0&activityName=${name}`,
  });
};
const anMaterssialTable1 = async () => {
  try {
    uni.showLoading({
      title: "加载中",
    });
    const res = await anMaterialTable1();
    if (res) {
      dataLists1.value = res.todoList || {};
      lens.value = Object.keys(dataLists1.value).length;
    }
  } catch (err) {
    dataLists1.value = {};
    lens.value = 0;
  } finally {
    uni.hideLoading();
  }
};
onShow(() => {
  anMaterssialTable1();
});
onPullDownRefresh(async () => {
  console.log("下拉刷新");
  await anMaterssialTable1();
  uni.stopPullDownRefresh();
});
</script>
<style lang="scss" scoped>
.lims_index > image {
  width: 100%;
  height: 322rpx;
}

.row-extra {
  flex-basis: initial;
  font-size: 32rpx;
  color: #888;
}

.row-arrow {
  width: 32rpx;
  height: 32rpx;
}

.row {
  display: flex;
  align-items: center;
}

.lims_menu {
  padding: 24rpx;
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.84rem;
    line-height: 0.84rem;
    padding: 0 0.24rem;
    font-size: 0.36rem;
    font-weight: bold;
  }
}

.lims_menu > view {
  margin: 0 0rpx 24rpx;
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(162, 162, 162, 0.35);
  border-radius: 4rpx;
}

.lims_menu > view > label {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  padding: 0 24rpx;
  font-size: 36rpx;
  font-weight: bold;
}

.commonColor {
  color: #959292;
}
.commonFont {
  font-size: 40rpx;
  font-weight: bolder;
}
.tongji {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.commonClass {
  font-size: 40rpx;
  font-weight: bold;
}
.charts-box {
  width: 100%;
  height: 500rpx;
}
</style>
  